html,body{
    height: 100%;
}

*{
    margin: 0;
    padding: 0;
}

.out{
    width: 1200px;
    height: 800px;
    margin: 0 auto;
    border: solid;
    display: grid;
    justify-items: center;
    align-items: center;
    justify-content: center;
    align-content: center;
    grid-template-columns: 300px 300px 400px;
    grid-template-rows: repeat(2,200px);
    grid-template-areas: 'a b c''d e f';
    grid-gap: 5px;
}

.out div{
    width: 300px;
    height: 200px;
    background-color: aqua;
}

.out div:nth-child(1){
    grid-area: a;
    background-color: aqua;
}
.out div:nth-child(2){
    grid-area: b;
    background-color: rgb(3, 71, 71);
}
.out div:nth-child(3){
        grid-area: c;
    background-color: rgba(30, 211, 84, 0.748);
}
.out div:nth-child(4){
        grid-area: d;
    background-color: rgb(243, 23, 148);
}
.out div:nth-child(5){
        grid-area: e;
    background-color: rgb(170, 203, 37);
}
.out div:nth-child(6){
        grid-area: f;
    background-color: rgb(221, 21, 21);
}